<template>
  <div class="x-pie">
    <div :id="id" class="pie-ctx"></div>
  </div>
</template>
<script>
export default {
  name: "xpie",
  props: {
    mapType: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: ""
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      option: {
        legend: {
          width: 20,
          // orient:"vertical",
          height: 8,
          top: 18,
          right: 50,
          icon: "rect",
          itemWidth: 10, // 设置宽度

          itemHeight: 8, // 设置高度

          itemGap: 8, // 设置间距
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        },
        	tooltip: {
						trigger: 'item',
						formatter: "{b} : {c} ({d}%)"
					},
        color: [
          "#209CFF",
          "#68E0CF",
          "#DEA55C",
          "#E16757",
          "#A1F68F",
          "#AB98f8",
          "#93B29F",
          "#2b821d",
          "#005eaa"
        ],
        series: [
          {
            type: "pie",
            electedOffset: 0,
            hoverAnimation: false,
            radius: ["65%", "90%"],
            center: ["25%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.data
          }
        ]
      }
    };
  },

  mounted() {
    this.drawPie();
  },
  methods: {
    drawPie() {
      console.log(this.data);
      let echarts = this.$echarts.init(document.getElementById(this.id));
      if (this.mapType === "education") {
        let legend = [];
        this.option.series[0].data.forEach((element, index) => {
          legend.push({
            orient: "horizontal",
            x: "50%",
            y: (index + 1) * 9.5 + "%",
            align: "left",
            data: [element.name],
            width: 20,
            height: 8,
            icon: "rect",
            itemWidth: 10, // 设置宽度
            itemHeight: 8, // 设置高度
            itemGap: 10, // 设置间距
            textStyle: {
              color: "#fff",
              fontSize: 14
            }
          });
        });
        this.option.legend = legend;
      }
      if (this.mapType === "cars") {
        this.option.series[0].radius = ["0%", "90%"];
        this.option.series[0].itemStyle = {
          borderWidth: 5,
          borderColor: "rgba(0, 0, 0, 0.8)"
        };
      }
      if(this.mapType ==="ageSum"){

        this.option.legend.top=0
      }
      echarts.setOption(this.option);
    }
  }
};
</script>
<style lang="less" scoped>
.x-pie {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .pie-ctx {
    width: 100%;
    height: 100%;
  }
}
</style>
